<!--
  描述：产品组详情页
  @author tanghongjun
  @since 2020-08-19 11:18:36
-->
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/common :: jscss">
    <title>新增或编辑视频</title>
</head>
<body>

<div class="layui-fluid">

    <div class="layui-card">
        <form method="post" action="" class="layui-form" lay-filter="zmn-form">

            <input type="hidden" name="channelId" th:value="${obj.channelId}"/>
            <input type="hidden" name="id" th:value="${obj.videoId}"/>

            <div class="layui-split">&nbsp;</div>
            <!--服务分类-->
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">服务分类：</label>
                <div class="layui-input-inline" style="width:200px">
                    <select id="servCategId" name="servCategId" lay-search lay-verify="required">
                        <option value=""></option>
                        <option th:value="${item.categId}" th:selected="${item.categId == obj.servCategId}"
                                th:text="${item.showName}"
                                th:each="item:${servCategories}">分类
                        </option>
                    </select>
                </div>
            </div>
            <!--视频个数-->
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">视频个数：</label>
                <div class="layui-input-inline" style="width:200px">
                    <select name="videoNumber" lay-search lay-verify="required" disabled>
                        <option value="1" th:selected="${obj.videoNumber == 1}">1</option>
                        <option value="2" th:selected="${obj.videoNumber == 2}">2</option>
                        <option value="3" th:selected="${obj.videoNumber == 3}">3</option>
                        <option value="4" th:selected="${obj.videoNumber == 4}">4</option>
                    </select>
                </div>
            </div>
            <!--业务类型-->
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">业务类型:</label>
                <div class="layui-input-inline" style="width: 400px" id="bizType">
                    <input type="checkbox" name="bizType" value="1" title="C-保外业务"
                           th:checked="${obj.bizType != null && obj.bizType.indexOf('1') != -1}">
                    <input type="checkbox" name="bizType" value="2" title="F-保内业务"
                           th:checked="${obj.bizType != null && obj.bizType.indexOf('2') != -1}">
                    <input type="checkbox" name="bizType" value="3" title="B-工程业务"
                           th:checked="${obj.bizType != null && obj.bizType.indexOf('3') != -1}">
                </div>
            </div>
            <!--类型-->
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">类型:</label>
                <div class="layui-input-inline" style="width: 380px" id="videoType">
                    <input type="checkbox" name="videoType" value="1" title="服务前"
                           th:checked="${obj.videoType != null && obj.videoType.indexOf('1') != -1}">
                    <input type="checkbox" name="videoType" value="2" title="服务中"
                           th:checked="${obj.videoType != null && obj.videoType.indexOf('2') != -1}">
                    <input type="checkbox" name="videoType" value="3" title="服务后"
                           th:checked="${obj.videoType != null && obj.videoType.indexOf('3') != -1}">
                </div>
            </div>
            <!--后台审核-->
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">后台审核:</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="radio" name="auditFlag" value="2" title="审核"
                           th:checked="${obj.auditFlag == 2||obj.auditFlag ==null}">
                    <input type="radio" name="auditFlag" value="1" title="不审核"
                           th:checked="${obj.auditFlag == 1}">
                </div>
            </div>
            <!--必传-->
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">必传:</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="radio" name="requiredFlag" value="2" title="必传"
                           th:checked="${obj.requiredFlag == 2 || obj.requiredFlag ==null}">
                    <input type="radio" name="requiredFlag" value="1" title="非必传"
                           th:checked="${obj.requiredFlag == 1 }">
                </div>
            </div>
            <!--视频上传-->
            <div class="layui-form-item">
                <label class="layui-form-label">示例视频：</label>
                <div class="layui-input-inline" style="width: 300px">
                    <div class="layui-inline">
                        <div class="layui-upload-drag" id="video"
                             th:style="${obj.videoSrc==null || obj.videoSrc==''?'':'padding: 10px !important;'}">
                            <input type="hidden" id="videoValue" name="videoSrc" th:value="${obj.videoSrc}">
                            <video th:src="${obj.videoSrc}"
                                   th:style="${obj.videoSrc==null ||obj.videoSrc=='' ?'display:none':'display:block;width: 100%; height: 130px'}"
                                   id="channelVideoDisplay"
                                   controls="controls">
                            </video>
                            <div id="channelUploadVideo"
                                 th:style="${obj.videoSrc==null ||obj.videoSrc==''?'display:block':'display:none'}">
                                <i class="layui-icon"></i>
                                <p>点击上传</p>
                            </div>
                            <span style="color: #9F9F9F;font-size: 12px">示例视频，仅用于展示，没有可不上传</span>
                            <p style="color: red;font-size: 12px">(格式支持：mp4或avi，上传视频需< 10M)</p>
                        </div>
                    </div>
                    <div class="layui-inline" style=" position: absolute; top: 50%">
                        <i onclick="previewVideoDetail()"
                           class="layui-icon layui-icon layui-icon-search btn-review"
                           style="display: flex"></i>
                        <i onclick="deleteVideo('videoDisplay')"
                           class="layui-icon layui-icon-delete btn-del delete_image"
                           style="display: flex"></i>
                        <br>
                    </div>
                </div>
            </div>
            <div class="layui-split">&nbsp;</div>
            <div class="layui-form-item layui-layout-admin">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <button class="layui-btn" lay-submit="" lay-filter="zmn-form-submit"
                                th:if="${#authPermit.checkPermit('/channel/workorder/video/addEdit.action')}">保存
                        </button>
                        <button class="layui-btn layui-btn-primary" onclick="cancel()" id="cancleBtn">
                            取消
                        </button>
                    </div>
                </div>
            </div>

        </form>

    </div>

</div>

<script type="text/javascript" th:inline="javascript">

    var json = {
        obj: [[${obj}]]
    };

    layui.config({
        base: "/static/lay/",
        version: "202106071821"
    }).extend({
        index: "lib/index",
        channel_workorder_video_detail: "channel/workorder/video/zmn.plat.channel.workorder.video.edit",
    }).use(['index', 'channel_workorder_video_detail']);

</script>
</body>
</html>